<script setup lang="ts">
import CrudPage from "@/components/CrudPage/index.vue";
import {
  createSysRole,
  getSysRoleList,
  updateSysRole,
  SysRole
} from "../../api/sysRole";

import { ref } from "vue";
import { useSysRoleProvider } from "./provider";
import EditRoleMenu from "./components/EditRoleMenu.vue";

const editRoleMenuRef = ref();

const query = ref<Record<string, any>>({});
const { columns } = useSysRoleProvider();

const onShouldLoadData = async (
  pgs: any
): Promise<{ list: SysRole[]; total?: number }> => {
  const { data } = await getSysRoleList(pgs);
  return data;
};

const editRoleMenu = (row: SysRole) => {
  editRoleMenuRef.value.showEdit(row);
};
</script>

<template>
  <div>
    <EditRoleMenu ref="editRoleMenuRef" />

    <CrudPage
      title=""
      row-key="id"
      :create="{
        viewType: 'drawer',
        labelPosition: 'top',
        rowProps: { gutter: 20 },
        colProps: { span: 12 }
      }"
      :columns="columns"
      child-field="children"
      :get-data-list="onShouldLoadData"
      @edit-confirm="updateSysRole"
      @create-confirm="createSysRole"
    >
      <template #operation="{ row, edit }">
        <el-button type="text" @click="edit(row)">编辑</el-button>
        <el-button text type="warning" @click="editRoleMenu(row)">
          角色菜单
        </el-button>
        <el-button type="text">删除</el-button>
      </template>
    </CrudPage>
  </div>
</template>
<style lang="scss" scoped></style>
